<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="/assets/vendor/bootstrap/dist/css/bootstrap.min.css" />
    <title>路桥裂缝检测</title>
  </head>
  <body>
    <div id="app" style="padding-top: 24px;">
      <h2 style="text-align: center;">路桥裂缝检测</h2>
      <div class="container" style="padding-top: 24px;">
        <div class="row">
          <div class="col-sm-6">
            <h4 style="text-align: center;">原始图片</h4>
            <div class="img-container">
              <img id="origin_img" src="/crack/_runtime/uploads/20240903_154248.png" />
            </div>
            <form>
              <div class="form-group">
                <label for="exampleInputFile">文件:</label>
                <input id="file" class="form-control-file" type="file" accept="image/png,image/jpeg,image/jpg" />
              </div>
            </form>
          </div>
          <div class="col-sm-6">
            <h4 style="text-align: center;">检查结果</h4>
            <div class="img-container">
              <img id="result_img" src="/crack/_runtime/result/20240905_105216.png" />
            </div>
            <form>
              <div class="form-group">
                <button id="submit" type="button" class="btn btn-primary">开始检测</button>
              </div>
              <div id="uploading" class="form-group" style="display:none">
                <label for="exampleInputFile">上传进度:</label>
                <div class="progress">
                  <div id="progress" class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
              </div>
              <div id="checking" class="form-group" style="display:none">
                <label for="exampleInputFile">检测中:</label>
                <div class="loading">
                  <svg width="32" height="32" viewBox="25 25 50 50" class="loader-roll-refresh-spinner">
                    <circle stroke="#409eff" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10"
                      class="loader-roll-refresh-path"></circle>
                  </svg>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <script>
      let formData
      // 获取 input file 的 dom 对象
      const inputFile = document.querySelector('#file');
        // 监听 change 事件
        inputFile.addEventListener('change', function() {
        // 使用 formData 装载 file
        formData = new FormData();
        formData.append('file', this.files[0]);
        fileToBase64(this.files[0]).then(text => {
          document.querySelector('#origin_img').src = text
        })
      })

      // 上传文件
      document.querySelector('#submit').addEventListener('click', function () {
        if (!formData) {
          alert('请选择文件')
          return false
        }
        submit(formData)
      }, false)

      // 提交
      const submit = ( formData ) => {
        const xhr = new XMLHttpRequest();
        document.querySelector('#progress').style.width = '0%';
        document.querySelector('#uploading').style.display = 'block'
        document.querySelector('#checking').style.display = 'none'
        // 监听文件上传进度
        xhr.upload.addEventListener('progress', function(e) {
          if (e.lengthComputable) {
            // 获取进度
            const progress = Math.round((e.loaded * 100) / e.total);
            document.querySelector('#progress').style.width = progress + '%';
            if (progress >= 98) {
              document.querySelector('#checking').style.display = 'block'
              document.querySelector('#uploading').style.display = 'none'
            }
          }
        },false);
        // 监听上传完成事件
        xhr.addEventListener('load', (res)=>{
          let text = res.target.responseText
          if (/{/.test(text)) {
            try {
              let data = JSON.parse(text)
              let file = (data.data || {}).file || ''
              file = file.replace(/.+www/, '')
              document.querySelector('#result_img').src = file
            } catch (e) {
              alert('检测失败')
            }
          } else {
            alert('检测失败')
          }
          document.querySelector('#uploading').style.display = 'none'
          document.querySelector('#checking').style.display = 'none'
        }, false);
        xhr.open('post', '/checkCrack');
        xhr.send(formData);
      }

      /**
       * @function 文件或blob转化为base64
      */
      function fileToBase64(file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = () => resolve(reader.result)
          reader.onerror = (error) => reject(error)
        })
      }
    </script>
    <style>
      .img-container {
        margin-bottom: 16px;
        height: 500px;
        border: 1px solid #ddd;
        text-align: center;
        align-content: center;
      }
      .img-container img {
        max-width: 100%;
        max-height: 100%;
      }
      .loader-roll-refresh-spinner {
        transform-origin: center center;
        animation: loader-roll-refresh-rotate 2s linear infinite;
      }

      @keyframes loader-roll-refresh-rotate {
        100% {
          -webkit-transform: rotate(1turn);
          transform: rotate(1turn);
        }
      }

      .loader-roll-refresh-path {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        stroke-linecap: round;
        animation: loader-roll-refresh-dash 1.5s ease-in-out infinite, loader-roll-refresh-colorful 6s ease-in-out infinite;
      }

      @keyframes loader-roll-refresh-dash {
        0% {
          stroke-dasharray: 1, 200;
          stroke-dashoffset: 0;
        }

        50% {
          stroke-dasharray: 89, 200;
          stroke-dashoffset: -35px;
        }

        100% {
          stroke-dasharray: 89, 200;
          stroke-dashoffset: -124px;
        }
      }
    </style>
  </body>
</html>